<template>
  <div class="dishsearch">
    <top-header :isLeft="true" title="菜谱搜索"></top-header>
    <div class="searchmenu">
      <a-input-search v-model="food_val" />
    </div>

    <div ref="allfood">
      <ul class="dishlist">
        <li v-for="(item, index) in store" :key="index" @click="to(item)">
          <img :src="getImage(item.content.object.photo)" alt="" />
          <div class="listcontent">
            <p class="name">{{ item.content.object.name }}</p>
            <div class="textbox" v-if="item.content.object.labels.length > 0">
              <div
                v-for="(j, ind) in item.content.object.labels"
                :key="ind"
                class="text"
              >
                {{ j.text }}
              </div>
            </div>
            <div class="textbox" v-else>
              <p
                v-for="(i, index) in item.content.object.ingredient"
                :key="index"
                class="shicai"
              >
                <span> {{ i.name }}<span>、</span></span>
              </p>
            </div>
            <p class="score" v-if="item.content.object.score != ''">
              {{ item.content.object.score }}<span>分</span>
            </p>
            <p v-else>暂无评分</p>
            <p class="author">{{ item.content.object.author.name }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  components: { TopHeader },
  data() {
    return {
      store: [],
      keys: [],
      num: 0,
      food_val: "",
      searchList: [],
      food:{
        name: "",
      author: "",
      icon:'',
      img:'',
      score:''
      }
      
    };
  },
  watch: {
    food_val: function () {
      this.searchFood();
    },
  },
  mounted() {
    // this.store = this.$route.query.store;
    // console.log(this.store)
    // this.keys = this.$route.query.keys;
    this.store = this.$store.getters.foods;
    console.log(this.store)
  },
  methods: {
    to(item) {
      // this.name = item.content.object.name;
      // this.author = item.content.object.author.name;
      // this.icon = item.content.object.author.image.ident;
      // this.img = item.content.object.photo;
      // this.score =item.content.object.score;
      
      this.food.name = item.content.object.name;
      this.food.author = item.content.object.author.name;
      this.food.icon = item.content.object.author.image.ident;
      this.food.img = item.content.object.photo;
      this.food.score =item.content.object.score;
      this.$store.dispatch('getfood',this.food);
      // console.log(this.icon);
      this.$router.push({name:'FoodContent'})
      // this.$router.push({
      //   name: "FoodContent",
      //   query: {
      //     store: this.store,
      //     name: this.name,
      //     author: this.author,
      //     icon:this.icon,
      //     img:this.img,
      //     score:this.score
      //   },
      // });
    },
    getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    searchFood() {
      if (this.city_val == "") {
        this.searchList = [];
      } else {
        this.searchList = this.allfood.filter((item) => {
          return item.content.object.name.indexOf(this.food_val) != -1;
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dishsearch {
  margin-bottom: $tabbar-height;
}
.searchmenu {
  margin-top: 60px;
  height: 50px;
  input {
    width: 72%;
    height: 100%;
    border: 0;
    outline: none;
  }
  span {
    margin-right: 10px;
  }
  hr {
    margin-top: 0;
    border: 0;
    background-color: rgb(202, 198, 198);
    height: 1px;
  }
}
.dishlist {
  // margin-top: 70px;
  width: 375.2px;
  padding: 0;
  li {
    margin-left: 5px;
    margin-top: 20px;
    list-style-type: none;
    display: flex;
  }
  img {
    width: 110px;
    height: 140px;
    margin-right: 5px;
  }
  .listcontent {
    width: 245px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 16px;
    .name {
      width: 230px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bolder;
      color: black;
      font-size: 20px;
      margin-bottom: 0;
    }
    .textbox {
      width: 250px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      // flex-wrap:nowrap
      overflow-y: scroll;
      white-space: nowrap;
    }
    .text {
      background-color: rgb(216, 213, 213);
      font-weight: bold;
      width: fit-content;
      padding: 0 10px;
      margin-bottom: 0;
      margin-right: 10px;
    }

    .score {
      font-weight: bold;
      margin-bottom: 0;
    }
    .author {
      font-size: 14px;
      margin-bottom: 0;
    }
  }
}
</style>